<template>
  <div class="app" ref="appContainer">
    <!-- 第1页 - 轮播图 -->
    <indexSlider></indexSlider>
    <!-- 第2页 -->
    <div class="neirong2">
      <div class="lines">
        <div class="wordbox " v-animate-on-scroll="'fadeInLeft'">
          <div class="words">
            <div class="title">
              <div class="word1">
                品质之选<span class="text">-KDX汽车窗膜</span>
              </div>
            </div>
            <div class="tit2">
              {{ webConfig.window_intro || '汽车窗膜简介，情在后台修改' }}
            </div>
            <div class="anniu">
              <router-link to="windowmembrane" v-animate-on-scroll="'shakeY'">了解更多</router-link>
            </div>
          </div>
        </div>
        <div class="tupian ">
          <div class="imgtu" style="background-image: url('/static/centerimg.png')" v-animate-on-scroll="'fadeInRight'">
          </div>
        </div>
      </div>

      <div class="lines">
        <div class="tupian">
          <div class="imgtu" style="background-image: url('/static/qiche.png')" v-animate-on-scroll="'fadeInLeft'">
          </div>
        </div>
        <div class="wordbox" v-animate-on-scroll="'fadeInRight'">
          <div class="words">
            <div class="title">
              <div class="word1">
                重甲守护<span class="text">-KDX漆面保护膜</span>
              </div>
            </div>
            <div class="tit2">
              {{ webConfig.paint_intro || '漆面保护膜简介，情在后台修改' }}
            </div>
            <div class="anniu rightanniu" v-animate-on-scroll="'shakeY'"><router-link :to="`/paintprotection`">了解更多</router-link></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 第3页 -->
    <div class="centerb">
      <img class="centerimg" src="/static/jiajus.jpg" />
      <div class="anniu btn2" v-animate-on-scroll="'shakeY'"><router-link :to="`/construction`">了解更多</router-link></div>
      <div class="worddd">
        <div class="wordtitle" v-animate-on-scroll="'fadeInLeft'">
          建筑膜 <span style="margin-left: 20px"> 家居膜 </span><span class="zhihu">智护空间新视界</span>
        </div>
        <div class="nei11" v-animate-on-scroll="'fadeInRight'">
          {{ webConfig.building_intro ? webConfig.building_intro.split('\r\n')[0] : '建筑膜简介，情在后台修改' }}
        </div>
        <div class="nei22" v-animate-on-scroll="'fadeInRight'">
          {{ webConfig.building_intro ? webConfig.building_intro.split('\r\n')[1] : '建筑膜简介，情在后台修改' }}
        </div>
      </div>
    </div>

    <!-- 第4页 -->
    <div>
      <video class="video" src="/static/che.mp4" controls :autoplay="true" loop></video>
    </div>

    <!-- 第5页 -->
    <div class="neirong2">
      <div class="lines">
        <div class="tupian" style="background-image: url('/static/ccede8533b4e69c99c5b90b78120a95.png')"></div>
        <div class="wordbox">
          <div class="words" style="float: left; padding-left: 50px">
            <div v-animate-on-scroll="'fadeInDown'">
             <div class="lis">
                亚洲大型窗膜制造生产商，世界预涂膜行业、中国光学膜行业重量级企业
                光学膜全产业链生产制造商
              </div>
              <div class="lis">
                公司拥有先进的厂房与生产设备，光学膜厂房洁净度达到10级
              </div>
              <div class="lis">一期项目总投资45亿元,占地574亩</div>
              <div class="lis">
                国际窗膜协会理事单位、连续12年国际窗膜协会制造商会员
              </div>
              <div class="lis">
                标准和管理领跑者:参与13个国标、6个行标、6大管理体系认证
              </div>
              <div class="lis">
                业内首个国家认可委员会实验室(CNAS),拥有4个高等级独立实验室
              </div>
              <div class="lis">
                申请专利1500+件、发明专利500+件、获授权专利900件
              </div>
              <div class="lis">
                承担国家重点研发计划、863计划、江苏省科技成果转化专项等重大项目
              </div>
              <div class="lis">已在全球40+国家服务超10000W车主</div>
            </div>
            <div class="anniu liaojie" v-animate-on-scroll="'shakeY'"><router-link :to="`/aboutus`">了解更多</router-link>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 第6页 -->
    <div class="news">
      <div class="pagecenter">
        <div class="titless" v-animate-on-scroll="'fadeInUp'">新闻资讯</div>
        <div class="linenews">
          <div v-for="(item, index) in newsList" :key="index" v-animate-on-scroll="'fadeInDown'">
            <router-link :to="`/news/detail?id=${item.id}`"><img class="biaoti" :src="item.cover_image" /></router-link>
            <div class="newti">
              <router-link :to="`/news/detail?id=${item.id}`">{{ item.title }}</router-link>
            </div>
            <div class="xonnei">{{ filterContent(item.content, 60) }}</div>
            <div class="more">
              <router-link :to="`/news/detail?id=${item.id}`" v-animate-on-scroll="'shakeY'">了解更多>></router-link>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 第7页 -->
    <div class="xianxia" id="page7">
      <div>
        <img class="biaoshi" src="/static/index1.png" />
        <div @click="goWarranty">质保查询</div>
      </div>
      <div>
        <img style="width: 126px; height: 36px; transform: translateY(22px)" class="biaoshi" src="/static/index2.png" />
        <div>线下渠道</div>
      </div>
      <div class="qu" @click="showqudao = !showqudao" style="position: relative">
        <img class="biaoshi" src="/static/index3.png" />
        <div>线上渠道</div>
        <div class="online-tooltip">
          <a href="https://kdx.tmall.com/" target="_blank">
            <img src="/static/tmall.png" alt="天猫" />
          </a>
          <a href="https://mall.jd.com/index-12761077.html" target="_blank">
            <img src="/static/jd.png" alt="京东" />
          </a>
          <a href="https://mobile.yangkeduo.com/mall_page.html?ps=yNfvetbZn5" target="_blank">
            <img src="/static/pdd.png" alt="拼多多" />
          </a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper-bundle.css";
import { get } from "@/utils/request";
import indexSlider from "@/view/components/indexSlider/index.vue";
import { useConfigStore } from '@/store/config';
import { storeToRefs } from 'pinia';

export default {
  components: {
    Swiper,
    SwiperSlide,
    indexSlider,
  },
  setup() {
    const configStore = useConfigStore();
    // 使用storeToRefs保持响应性
    const { webConfig } = storeToRefs(configStore);
    
    return {
      webConfig
    };
  },
  data() {
    return {
      currentSlide: 0,
      swiperList: [],
      newsList: [],
      swiperOptions: {
        slidesPerView: 1,
        spaceBetween: 0,
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false,
        },
        on: {
          slideChange: () => this.updateIndicator(),
        },
      },
      showqudao: false
    };
  },
  mounted() {
    this.getSwiperList();
    this.getNewsList();
  },
  methods: {
    goWarranty() {
      window.open('https://qs.kdxwindowfilm.com/qualitySearch', '_blank');
    },
    getSwiperList() {
      get("/swiper/list").then((res) => {
        if (res.code == 200) {
          this.swiperList = res.data || [];
        }
      });
    },
    getNewsList() {
      get("/news/list", { pageSize: 3, page: 1, is_home: 1 }).then((res) => {
        if (res.code == 200) {
          this.newsList = res?.data?.list;
        }
      });
    },
    updateIndicator() {
      if (this.$refs.mySwiper && this.$refs.mySwiper.$swiper) {
        const swiper = this.$refs.mySwiper.$swiper;
        this.currentSlide = swiper.realIndex % this.swiperList.length;
      }
    },
    onSlideChange() {
      this.updateIndicator();
    },
    goToSlide(index) {
      if (this.$refs.mySwiper && this.$refs.mySwiper.$swiper) {
        this.$refs.mySwiper.$swiper.slideToLoop(index);
      }
    },
    filterContent(content, length) {
      const text = content.replace(/<[^>]*>/g, "");
      if (length && text.length > length) {
        return text.substring(0, length) + "...";
      }
      return text;
    },
  }
};
</script>

<style scoped lang="less">
.custom-indicator {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  bottom: 50px;
  z-index: 99;
  left: 0;
}

.indicator-dot {
  width: 30px;
  height: 6px;
  margin: 0 8px;
  border-radius: 5px;
  background-color: rgba(170, 170, 170, 0.6);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator-dot.active {
  width: 89px;
  background-color: #ffffff;
}

.indicator-dot:hover {
  background-color: #a30008;
}

.swipers {
  width: 100%;
  height: 100vh;
  position: relative;

  .banners {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.neirong2,
.neirong3,
.centerb,
.video,
.news,
.xianxia {
  height: 100vh;
  scroll-snap-align: start;
  position: relative;
}

.neirong2 {
  height: auto
}

.neirong3 {
  background: #f5f5f5;
}

.video {
  object-fit: cover;
}

.nei11 {
  font-size: 25px;
  line-height: 50px;
  margin-top: 40px;
}

.nei22 {
  font-size: 25px;
  line-height: 50px;
}

.wordtitle {
  font-size: 50px;
  line-height: 150px;
  position: relative;
  letter-spacing: 8px;
  font-weight: bold;
}

.wordtitle::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 80px;
  height: 10px;
  background: rgb(195, 0, 10);
}

.zhihu {
  margin-left: 50px;
  color: rgb(195, 0, 10);
}

.worddd {
  position: absolute;
  top: 7%;
  width: 48%;
  left: 33vw;
}

.pagecenter {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.xianxia {
  display: flex;
  justify-content: center;
  justify-items: center;
  width: 80%;
  margin: 0 auto;
  height: 80px;
  padding: 50px 0;
}

.biaoshi {
  width: 64px;
  display: block;
  height: 74px;
}

.xianxia>div>div:nth-child(2) {
  font-size: 33px;
  line-height: 35px;
  height: 35px;
  margin-left: 22px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.xianxia>div {
  flex: 1;
  display: flex;
  justify-content: center;
  justify-items: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  position: relative;

  &:hover .online-tooltip {
    display: block;
    animation: fadeIn 0.3s ease;
  }
}

.online-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: none;
  z-index: 100;
  width: 300px;
  text-align: center;

  &::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: white transparent transparent transparent;
  }

  a {
    display: inline-block;
    margin: 0 10px;

    img {
      width: 66px;
      height: 66px;
      transition: transform 0.3s;

      &:hover {
        transform: scale(1.2);
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.more {
  font-size: 23px;
  text-align: right;

  a {
    color: rgb(197, 0, 10);
  }
}

.xonnei {
  font-size: 23px;
  line-height: 47px;
  text-align: left;
  color: rgb(46, 46, 46);
}

.newti {
  text-align: left;
  font-size: 30px;
  line-height: 72px;
  font-weight: bold;
  margin-bottom: 10px;

  a {
    color: #111;

    &:hover {
      color: rgb(197, 0, 10);
    }
  }
}

.linenews {
  width: 100%;
  display: flex;
  text-align: center;
  justify-content: center;
  justify-items: center;
  margin-top: 50px;
}

.biaoti {
  width: 100%;
  aspect-ratio: 5/2;
  object-fit: cover;
}

.linenews>div {
  flex: 1;
  padding: 0 30px;
  box-sizing: border-box;
}

.news {
  background: rgb(245, 245, 245);
  width: 100%;
  padding: 50px;
  height: 100vh;
  box-sizing: border-box;
}

.titless {
  text-align: center;
  font-size: 50px;
  line-height: 120px;
  position: relative;
}

.titless::before {
  position: absolute;
  content: "";
  width: 80px;
  height: 10px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: rgb(197, 0, 10);
}

.liaojie {
  float: right;
}

.lis {
  font-size: 24px;
  padding: 10px 15px;
  position: relative;
  line-height: 40px;
}

.lis::before {
  content: "";
  width: 10px;
  height: 10px;
  background: rgb(197, 0, 10);
  position: absolute;
  left: -10px;
  top: 25px;
  border-radius: 50%;
}

.video {
  width: 100%;
  background: black;
  height: 100vh;
}

.btn2 {
  position: absolute;
  bottom: 38%;
  right: 300px;
}

.centerb {
  position: relative;
}

.centerimg {
  width: 100%;
}

.imgtu {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.anniu {
  background: rgb(197, 0, 10);
  color: white;
  text-align: center;
  width: 220px;
  line-height: 60px;
  font-size: 25px;
  margin-top: 50px;

  a {
    color: #fff;
  }
}

.rightanniu {
  background: rgb(37, 35, 36)
}

.tit2 {
  font-size: 28px;
  color: rgb(56, 56, 56);
  line-height: 50px;
  margin-top: 80px;
}

.lines {
  display: flex;
  justify-content: center;
  justify-items: center;
  height: 100vh;
  padding: 90px 0;
  box-sizing: border-box;
}

.tupian {
  flex: 1;
  height: 749px;
  background-size: cover;
  background-position: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  background-position: center;
}

.text {
  color: rgb(8, 8, 8);
}

.word1 {
  font-size: 50px;
  color: rgb(197, 0, 10);
  font-weight: bold;
  overflow: hidden;
}

.wordbox {
  overflow: hidden;
  flex: 1;
}

.title {
  line-height: 208px;
  position: relative;
}

.title::before {
  content: "";
  position: absolute;
  width: 99px;
  height: 20px;
  background: rgb(197, 0, 10);
  bottom: 0px;
}

.words {
  width: 80%;
  float: right;
  padding-right: 20px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.lines:nth-child(odd) .wordbox {
  float: left;
}

.lines:nth-child(odd) .wordbox .words {
  float: right;
}

.lines:nth-child(even) .wordbox .words {
  float: left;
  padding-left: 30px;
}

.lines:nth-child(even) {
  background: rgb(245, 245, 245);
}

.lines:nth-child(even) .tupian {
  float: right;
}

.neirong2 {
  overflow: hidden;
}
</style>